<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-white text-gray-800 font-sans">
    <!-- 顶部导航 -->
    <nav
      class="fixed top-0 w-full bg-white/80 backdrop-blur-md z-50 border-b border-gray-200"
    >
      <div
        class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"
      >
        <div class="flex items-center space-x-2">
          <div class="text-blue-500 text-2xl font-bold animate-pulse">
            AI Chat
          </div>
        </div>
        <div class="text-gray-600">智能对话系统 v2.0</div>
        <div class="flex items-center space-x-4">
          <el-icon
            class="text-xl cursor-pointer hover:text-blue-500 transition-colors"
            ><Setting
          /></el-icon>
          <el-icon
            class="text-xl cursor-pointer hover:text-blue-500 transition-colors"
            ><Bell
          /></el-icon>
        </div>
      </div>
    </nav>
    <!-- 主对话区域 -->
    <div class="max-w-7xl mx-auto px-6 pt-24 pb-32">
      <div class="chat-container" ref="chatContainer">
        <div
          v-for="(msg, index) in messages"
          :key="index"
          :class="[
            'message-item mb-6 opacity-0 transform translate-y-4',
            { 'animate-message-in': msg.animated },
          ]"
        >
          <div
            :class="[
              'max-w-3xl rounded-xl p-4 shadow-lg',
              msg.isAi
                ? 'ml-4 bg-white border border-gray-100'
                : 'ml-auto mr-4 bg-gradient-to-r from-blue-50 to-blue-100',
            ]"
          >
            <div class="flex items-start gap-4">
              <div
                v-if="msg.isAi"
                class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white"
              >
                <el-icon class="text-2xl"><Service /></el-icon>
              </div>
              <div class="flex-1">
                <div class="text-sm text-gray-400 mb-1">
                  {{ msg.isAi ? "AI助手" : "我" }}
                </div>
                <div :class="msg.isAi ? 'text-gray-800' : 'text-gray-700'">
                  {{ msg.content }}
                </div>
              </div>
              <div
                v-if="!msg.isAi"
                class="w-10 h-10 rounded-full bg-white border border-blue-200 flex items-center justify-center text-blue-500"
              >
                <el-icon class="text-2xl"><User /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="isThinking"
          class="flex items-center space-x-2 ml-4 text-blue-500"
        >
          <div class="loading-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <span class="text-sm">AI正在思考中...</span>
        </div>
      </div>
    </div>
    <!-- 底部输入区域 -->
    <div
      class="fixed bottom-0 w-full bg-white/95 backdrop-blur-md border-t border-gray-200"
    >
      <div class="max-w-7xl mx-auto px-6 py-4">
        <div class="relative">
          <div class="flex items-center gap-4">
            <div class="flex-1 relative">
              <input
                type="text"
                v-model="inputMessage"
                @focus="handleInputFocus"
                @input="handleInput"
                @keyup.enter="sendMessage"
                placeholder="输入您的问题..."
                class="w-full bg-gray-100 text-gray-800 rounded-xl px-4 py-3 pr-12 border-none outline-none focus:ring-2 focus:ring-blue-500 transition-all"
              />
              <div
                v-if="showRipple"
                :style="rippleStyle"
                class="ripple-effect absolute pointer-events-none"
              ></div>
            </div>
            <button
              @click="sendMessage"
              :class="[
                '!rounded-button whitespace-nowrap flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-500 rounded-xl hover:opacity-90 transition-all transform hover:scale-105',
                { 'opacity-50 cursor-not-allowed': !inputMessage },
              ]"
              :disabled="!inputMessage"
            >
              <el-icon><Position /></el-icon>
              发送
            </button>
          </div>
          <div class="absolute right-32 bottom-3 flex items-center space-x-4">
            <el-icon
              class="text-xl text-gray-400 cursor-pointer hover:text-blue-500 transition-colors"
              @click="toggleVoiceInput"
            >
              <Microphone />
            </el-icon>
            <span class="text-sm text-gray-400">{{ charCount }}/2000</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script lang="ts" setup>
import { ref, onMounted } from "vue";
import {
  Setting,
  Bell,
  Service,
  User,
  Position,
  Microphone,
} from "@element-plus/icons-vue";
interface Message {
  content: string;
  isAi: boolean;
  animated: boolean;
}
const messages = ref<Message[]>([
  {
    content: "你好！我是AI助手，很高兴为您服务。请问有什么我可以帮助您的吗？",
    isAi: true,
    animated: false,
  },
]);
const inputMessage = ref("");
const isThinking = ref(false);
const showRipple = ref(false);
const rippleStyle = ref({
  left: "0px",
  top: "0px",
});
const chatContainer = ref<HTMLElement | null>(null);
const charCount = ref(0);
const handleInput = () => {
  charCount.value = inputMessage.value.length;
};
const handleInputFocus = (e: FocusEvent) => {
  const target = e.target as HTMLElement;
  const rect = target.getBoundingClientRect();
  rippleStyle.value = {
    left: `${rect.width / 2}px`,
    top: `${rect.height / 2}px`,
  };
  showRipple.value = true;
  playSound();
};
const playSound = () => {
  const audio = new Audio(
    "data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAsFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFD/+MYxAAR0AYAIAAAAAFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQ"
  );
  audio.play();
};
const toggleVoiceInput = () => {
  // Voice input logic would go here
};
const scrollToBottom = () => {
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
  }
};
const sendMessage = async () => {
  if (!inputMessage.value.trim()) return;
  // Add user message
  messages.value.push({
    content: inputMessage.value,
    isAi: false,
    animated: true,
  });
  const userMessage = inputMessage.value;
  inputMessage.value = "";
  charCount.value = 0;
  // Show thinking state
  isThinking.value = true;
  scrollToBottom();
  // Simulate AI response after delay
  setTimeout(() => {
    isThinking.value = false;
    messages.value.push({
      content: `我理解您的问题是关于"${userMessage}"。这是一个很好的问题，让我为您详细解答...`,
      isAi: true,
      animated: true,
    });
    scrollToBottom();
  }, 2000);
};
onMounted(() => {
  messages.value[0].animated = true;
});
</script>
  <style scoped>
.chat-container {
  height: calc(100vh - 13rem);
  overflow-y: auto;
  scroll-behavior: smooth;
}
.loading-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  margin: 0 2px;
  animation: loading 1.4s infinite;
}
.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes loading {
  0%,
  100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.ripple-effect {
  width: 12px;
  height: 12px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  animation: ripple 1s linear infinite;
}
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
.animate-message-in {
  animation: messageIn 0.5s ease forwards;
}
@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f3f4f6;
}
::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}
</style>
  